<template>
    <div class="gradient-box">
        <div>
            <van-icon name="location-o" class="left_icon" />
            <van-dropdown-menu class="drop">
                <van-dropdown-item v-model="code" :options="city" @change="changeCity" />
            </van-dropdown-menu>
        </div>
        <span class="index">首页</span>
        <div class="point_box">
            <van-icon name="weapp-nav" class="point" />
            <span class="icon_line">|</span>
            <van-icon name="stop-circle" class="point_circle" />
        </div>
        <img src="http://inews.gtimg.com/newsapp_bt/0/15656824038/641" alt="" class="health">
    </div>
    <div class="content">
        <div class="hospital_box">
            <div class="service_img">
                <div>
                    <van-image round width="2.5rem" height="2.5rem"
                        src="https://n.sinaimg.cn/sinakd20115/480/w640h640/20220305/ce6a-e297e6590ccacd2e844cb76a4b1f7c46.jpg"
                        class="item" />
                    <p class="item_des">诊前咨询</p>
                </div>
                <div>
                    <van-image round width="2.5rem" height="2.5rem"
                        src="https://img.tukuppt.com/png_preview/00/53/66/a7zj9rKsxK.jpg!/fw/780" class="item" />
                    <p class="item_des">诊前约号</p>
                </div>
                <div>
                    <van-image round width="2.5rem" height="2.5rem"
                        src="https://bpic.588ku.com/element_origin_min_pic/20/03/26/4d40b510b8da7160ef968dde79b61eb2.jpg"
                        class="item" />
                    <p class="item_des">代办问诊</p>
                </div>
                <div @click="toBuyMedicine">
                    <van-image round width="2.5rem" height="2.5rem"
                        src="https://p7.itc.cn/q_70/images03/20220515/a72db3436125419ba69ed683b604cd8a.png" class="item" />
                    <p class="item_des">代办买药</p>
                </div>
                <div>
                    <van-image round width="2.5rem" height="2.5rem"
                        src="https://bpic.588ku.com/element_origin_min_pic/19/03/06/a2c2f75b9aa94439a20850d9ba76245e.jpg"
                        class="item" />
                    <p class="item_des">送取结果</p>
                </div>
            </div>
            <div class="accompany">
                <img src="/public/1.jpg" alt="" class="accompany_img" @click="toCompany">
                <img src="/public/2.jpg" alt="" class="accompany_img" @click="toInhospital">
            </div>
        </div>
        <div class="hospital_info">
            <div class="hospital_detail" v-for=" item, i in hospitalData" :key="i" @click="tosearchHospital(item.name)">
                <img :src='item.img' alt="" class="img_detail">
                <p class="hospital_name">{{ item.name }}</p>
                <span class="hospitgal_level">{{ item.level }}</span>
                <span class="line">|</span>
                <span class="hospital_type">{{ item.type }}</span>
                <p class="hospital_des">医院简介</p>
            </div>
        </div>
    </div>
    <div>
        <tabbar></tabbar>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '../stores/store';
import { useRouter } from 'vue-router';
import http from '@/http';
import city from '../components/city.json';
import tabbar from '@/components/tabbar.vue';
const userStore = useUserStore();
const router = useRouter();
let hospitalData = ref([]);
const code = ref('');

const changeCity = (value) => {
    const selectedCity = city.find(item => item.value === value);
    if (selectedCity) {
        let address = { 'address': selectedCity.text };
        userStore.setCity(selectedCity.text);
        console.log("城市保存成功", address);
        http.post('/patient/hospital/', { city_name: selectedCity.text })
            .then(res => {
                hospitalData.value = res.data.hospital_list;
                userStore.setHospitalList(res.data.hospital_list);
                console.log("医院列表保存成功", hospitalData.value);
                if (res.data.msg === '该城市没有医院') {
                    alert('该城市暂无医院');
                } else {
                    console.log('请求成功', res.data.hospital_list);
                }
            }).catch(error => {
                console.log('请求失败', error);
            });
    }
}

onMounted(() => {
    changeCity(code.value)
    http.get('/patient/hospital/', {
    }).then(res => {
        console.log('请求成功', res.data.hospital_list);
        hospitalData.value = res.data.hospital_list;
    }).catch(error => {
            console.error('请求失败', error);
        });
})

const tosearchHospital = (hospitalName) => {
    router.push({ path: '/tosearchHospital', query: { hospitalName: hospitalName, city: userStore.city } })
}

function toInhospital() {
    router.push('/inhospital')
}

function toBuyMedicine() {
    router.push({
            path: '/buymedicine',
            query: {
                serviceItem: '代办买药',
                servicePrice: '150'
            }
        });
}

function toCompany() {
    router.push('/companysevice')
}

</script>
<style scoped>
.gradient-box{
    position: relative;
    background: linear-gradient(to bottom, rgb(47, 119, 243), white);
}
.left_icon {
    position: absolute;
    top: 10%;
    left: 5%;
    color: white;
}

.popup {
    position: absolute;
    top: 0;
    left: 20%;
    background-color: rgb(98, 152, 246);
}

.index {
    position: absolute;
    color: white;
    top: 10%;
    left: 170px;
}

.point_box {
    position: absolute;
    top: 8%;
    right: 6%;
    width: 25%;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.1);
}

.icon_line {
    position: absolute;
    right: 45%;
    top: 15%;
    color: rgba(255, 255, 255, 0.3);
}

.point {
    position: absolute;
    right: 65%;
    top: 15%;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.point_circle {
    position: absolute;
    right: 15%;
    top: 15%;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.health {
    width: 88%;
    height: 130px;
    margin: 15% 6% 0 6%;
    border-radius: 10px;
}

.service_img {
    display: flex;
    justify-content: space-between;
    margin-left: 8%;
}

.service_img div {
    flex: 1;
}

.item {
    margin-left: 5%;
}

.item_des {
    font-size: 12px;
    margin-top: 2%;
    font-weight: 600;
}

.accompany {
    margin: 5% 5% 0;
}

.accompany_img {
    margin: 0 1%;
    border-radius: 10px;
    width: 48%;
    height: 80px;
}

.content{
    background-color: rgba(0, 0, 0, 0.03);
}
.hospital_box {
    height: 25vh;
}

.hospital_info{
    padding-bottom: 10%;
    height: 120vh;
}
    
.hospital_detail {
    position: relative;
    background-color: white;
    margin: 5% 5%;
    width: 90%;
    height: 110px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
}

.img_detail {
    position: absolute;
    width: 40%;
    height: 70%;
    left: 3%;
    margin-top: 5%;
    border-radius: 10px;
}

.hospital_name {
    position: absolute;
    left: 50%;
    top: 0;
}

.hospitgal_level {
    position: absolute;
    left: 50%;
    top: 50%;
    color: rgb(247, 114, 19)
}

.line {
    position: absolute;
    left: 70%;
    top: 50%;
}

.hospital_type {
    position: absolute;
    left: 75%;
    top: 50%;
}

.hospital_des {
    position: absolute;
    left: 50%;
    top: 60%;
}
</style>
<style>
.drop .van-dropdown-menu__bar {
    position: absolute;
    top: 10%;
    left: 10%;
    height: auto;
    box-shadow: none;
    background: transparent;
}

.drop .van-dropdown-menu__item {
    justify-content: left;
}

.drop .van-dropdown-menu__title {
    color: white;
    font-size: 13px;
}
</style> 


